how to add random position by left side in css but using for setting java sript?

Ask Time：2022-09-01T07:41:33 Author：maslori production

i tried to add the random placement of "text2" but when i press button the left = 0 and nothin else , i used math random, if i will setting direct postion settings thats will works " for example title.setAttribute("style", "color: red; position: relative; left: 100px;" but if i use the random that doesn`t work, the title is staying always at the same position but random show the numbers what should to move the title to the other place ..... sorry for my english :)

Java Script

function pos(argument) {
    var title = document.getElementById("text1");
    var pos2 = Math.floor(Math.random() * 300) +200 ;//random numbers from 200 to 300 pos
    title.setAttribute("style",  "color: red; position: relative; left:" + pos2 +";" );// style setting 
console.log(pos2);
}

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">

    <title></title>
</head>
<body>
    <div id="sheet"><div id="block" style="background-color:red ; width: 100px; height: 100px; position: relative; left:0px;"></div></div>
    <div id="button"><button type="button" onclick="pos()">something</button></div>
    <h1 id="text1" style="color:blue; left: 100px; position: relative;">title</h1>
</body>
</html>

CSS

*{
    padding: 0;
}


#sheet{
    width: 400px;
    height: 150px;
    border: 2px solid black;
}

#button{
    top: 300px;
    position: relative;
    width: 100;
    height: 100;
}

Author:maslori production，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/73562938/how-to-add-random-position-by-left-side-in-css-but-using-for-setting-java-sript

Imam Baihaqi :

Your problem is in javascript\n\r\n\r\n function pos(argument) {\n var title = document.getElementById(\"text1\");\n var pos2 = Math.floor(Math.random() * 300) +200 ;//random numbers from 200 to 300 pos\n title.setAttribute(\"style\", \"color: red; position: relative; left:\" + pos2 +\"px\" );// style setting \nconsole.log(pos2);\n}\r\n*{\n padding: 0;\n}\n\n\n#sheet{\n width: 400px;\n height: 150px;\n border: 2px solid black;\n}\n\n#button{\n top: 300px;\n position: relative;\n width: 100px;\n height: 100px;\n}\r\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n <title>Doc</title>\n</head>\n<body>\n <div id=\"sheet\"><div id=\"block\" style=\"background-color:red ; width: 100px; height: 100px; position: relative; left:0px;\"></div></div>\n <div id=\"button\"><button type=\"button\" onclick=\"pos()\">something</button></div>\n <h1 id=\"text1\" style=\"color:blue; left: 100px; position: relative;\">title</h1>\n\n <script >\n \n </script>\n</body>\n</html>",

2022-09-01T01:38:41

how to add random position by left side in css but using for setting java sript?